<template>
  <div class="todo-input">
    <input
      autofocus="autofocus"
      autocomplete="off"
      placeholder="您的待办事项是?"
      class="new-todo"
      v-focus
      @keyup.enter="onSubmit"
      v-model.trim="value"/>
  </div>
</template>

<script>
export default {
  name: "TodoInput",
  data() {
    return {
      value:''
    }
  },
  methods: {
    onSubmit() {
      this.$emit('submit', this.value)
      this.value = ''
    }
  }
};
</script>

<style lang="scss" scoped>
.new-todo {
  padding: 16px 16px 16px 60px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}
input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}
</style>
